<template>
  <div class="BooksList">
    <transition
      name="fadeIn"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown">
      <div class="body" v-show="books" @click="go(books.book_id)">
        <div class="img" @click="go(books.book_id)">
          <!--<img src="../../assets/img/BookShelf/chang1.png" alt="">-->
          <img :src="books.book_cover" alt="">
        </div>
        <div class="text">
          <div class="title">
            <div class="name" style="display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;">
              {{books.book_name}}
            </div>
            <div class="btn">
              <div class="" v-show="is_vip===0">
                <i class="iconfont icon-lijijinrushiting"></i><span>立即试听</span>
              </div>
              <div style="padding: 0 .2rem" v-show="is_vip===1&&books.collection_state===0" @click.stop='to(books)'>
                <i class="iconfont icon-tianjia"></i><span>添加到书架</span>
              </div>
              <div class="already" v-show="is_vip===1&&books.collection_state!==0">
                <i class="iconfont icon-yitianjia"></i><span>已添加</span>
              </div>
            </div>
          </div>
          <div class="popup-text">
            <span>共{{books.word_number|capitalize}}万字</span>
            <span v-if="false">词汇量 <img src="../../assets/img/Collection/1.png" alt=""> {{books.recommend_word}}</span>
          </div>
          <div class="doc" style="display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;">
            {{books.book_desc}}
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'books-list',
    data: function () {
      return {}
    },
    props: ['obj', 'text', 'is_vip'],
    computed: {
      books: {
        get: function () {
          return this.obj
        },
        set: function (v) {
          this.obj = v
        }
      }
    },
    mounted: function () {
      // console.log(this.is_vip)
    },
    methods: {
      to: function (obj) {
        this.$emit('add', obj)
      },
      go: function (obj) {
        this.$emit('go', obj)
      }
    },
    components: {}
  }
</script>

<style scoped>
  @import "../../assets/css/components/BooksList/index.css";

  .BooksList .body .text .doc {
    text-align: left;
    color: #90999e;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .BooksList .body .text .title .name {
    font-size: 1.5rem;
    color: #2a2a33;
    width: 70%;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
</style>
